<template>
    <div class="my-center">
        <my-center-header/>
        <white-space/>
        <my-orders/>
        <white-space/>
        <van-cell-group>
            <van-cell icon="shopping-cart-o" title="购物车" is-link center to="/cart"/>
            <van-cell icon="location-o" title="收货地址" is-link center to="/addresses"/>
            <van-cell icon="circle" title="账号与安全" is-link center/>
            <van-cell icon="user-o" title="个人信息" is-link center :to="'/customers/' + customerId"/>
        </van-cell-group>
        <white-space/>
        <van-cell-group>
            <van-cell icon="flag-o" title="问题反馈" is-link center/>
            <van-cell icon="apps-o" title="关于Mallfoundry" is-link center/>
        </van-cell-group>
        <white-space/>
        <van-cell-group>
            <van-cell title-class="my-center-logout" title="安全退出" clickable center @click.stop="handleLogout"/>
        </van-cell-group>
        <tabbar/>
    </div>
</template>

<script>
  import Tabbar from "@/components/Tobbar"
  import { Cell, CellGroup, Image } from "vant"
  import MyOrders from "@/views/my-center/MyOrders"
  import WhiteSpace from "@/components/WhiteSpace"
  import WingBlank from "@/components/WingBlank"
  import MyCenterHeader from "@/views/my-center/MyCenterHeader"
  import { security } from "@mall/api-services"

  const { SecurityUserHolder } = security

  export default {
    name: "MyCenter",
    components: {
      MyCenterHeader,
      WingBlank,
      WhiteSpace,
      MyOrders,
      Tabbar,
      [Cell.name]: Cell,
      [CellGroup.name]: CellGroup,
      [Image.name]: Image,
    },
    computed: {
      customerId() {
        return SecurityUserHolder.getUserId()
      },
    },
    methods: {
      handleLogout() {
        SecurityUserHolder.logout()
        const query = {}
        const user = SecurityUserHolder.getUser()
        if (user) {
          const { mobile } = user
          query.mobile = mobile
        }

        this.$router.push({
          path: "/login",
          query,
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
    .my-center {

        .my-center-logout {
            text-align: center;
        }
    }
</style>
